{extend name="common/common" /}

{block name="style"}
<style media="screen">
#main {
	overflow:hidden;
	height:100%;
	padding-bottom:30px;
}
.SideBar {
	width:200px;
	float:left;
	background:#FFF;
	height:100%;
}
.content{
	height:100%;
	background-color:#F5F5F5;
}
.el-menu{
	height:100%;
}
#background{
	position:fixed;z-index:-1;
}
.el-card__body{
	overflow:hidden;
}
.visitor-info{
	width:100%;
	height:100%;
	list-style:none;
}
.visitor-info h5 {
	margin:0;
	line-height:1.8;
	text-align:left;
}
.real-name-btn{
	margin-left:15px;
	padding: 4px 6px;
}
.visitor-head {
	border-radius:10px;
	cursor:pointer;
	padding:2px;
	border:1px solid #333;
}
/* PC */
@media screen and (min-width: 700px) {
	.content{
		margin-left:210px;
	}
}
/* WAP */
@media screen and (max-width: 700px) {
    .SideBar {
        display: none;
    }
}
</style>
{/block}

{block name="content"}
<canvas id="background"></canvas>
<ul id="grid" style="display:none">
	<li><img src="__IMG__/home-images/image-4.jpg"/></li>
</ul>
<main role="main-home-wrapper" class="container" id="main">
	<div class="SideBar">
		<el-menu
	      	default-active="{$SideBar[0]['id']}">
			{volist name="SideBar" id="v"}
				{if condition="empty($v['children'])"}
				<el-menu-item index="{$v.id}" @click="changePage('{$v.src}')">
					<span slot="title">{$v.title}</span>
				</el-menu-item>
				{else}
				<el-submenu index="{$v.id}">
					<template slot="title">
					<span>{$v.title}</span>
					</template>
					{volist name="v['children']" id="va"}
					<el-menu-item index="{$va.id}" @click="changePage('{$va.src}')">
			          <span slot="title">{$va.title}</span>
			        </el-menu-item>
					{/volist}
				</el-submenu>
				{/if}
			{/volist}
	    </el-menu>
	</div>
	<div class="content">
		<iframe id="iframePage" src="{:url('index/visitor/index_page')}" width="100%" height="100%"></iframe>
	</div>
</main>
{/block}
{block name="script"}
<script src="__JS__/bg.js"></script>
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{

	},
	methods:{
		changePage(url) {
			if(url == "index/visitor/index"){
				url = "index/visitor/index_page";
			}
			iframePage.src = "/" + url;
		}
	}
});
</script>
{/block}
